<template>
	<view class="yb-flex" :id="customIdSync" :class="customClassSync" :style="customStyleSync">
		<yb-tap
		:active="active"
		:disabled="disabled || loading"
		@click="onTap"
		:double="double"
		:stop="stop"
		@doubletap="onDoubletap"
		@longpress="onLongpress"
		custom-class="yb-button yb-row yb-flex-1 yb-align-center yb-justify-center"
		:custom-style="{
			'background-color': plain ? '' : optionsSync.bgColor,
			'border-color': type == 'default' ? optionsSync.color : optionsSync.bgColor,
			'border-radius': Util.pixelunit(optionsSync.radius)
		}">
			<yb-loading :visible="loading" :type="loadingSync.type" :color="loadingSync.color" :size="loadingSync.size"></yb-loading>
			<slot name="left-icon"><yb-icon :name="iconSync.name" :size="iconSync.size" :color="iconSync.color" v-if="iconSync.float == 'left'"></yb-icon></slot>
			<slot><text class="button-text" :style="{color: plain ? optionsSync.bgColor : optionsSync.color, 'font-size': Util.pixelunit(optionsSync.size)}" v-if="value">{{value}}</text></slot>
			<slot name="right-icon"><yb-icon :name="iconSync.name" :size="iconSync.size" :color="iconSync.color" v-if="iconSync.float == 'right'"></yb-icon></slot>
		</yb-tap>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			value: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'primary'
			},
			stop: {
				type: Boolean,
				default: false
			},
			double: {
				type: Boolean,
				default: false
			},
			plain: {
				type: Boolean,
				default: false
			},
			active: {
				type: [String,Boolean,Object],
				default: 'mask'
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			},
			icon: {
				type: [Object,String],
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			Util () {
				return Util
			},
			optionsSync () {
				return Object.assign({}, {
					bgColor: this.type == 'primary' ? '#1989FA' : this.type == 'success' ? '#07C160' : this.type == 'danger' ? '#EE0A24' : '#FF976A',
					color: '#fff',
					loading: 1,
					radius: '5rpx',
					size: '32rpx'
				}, this.options)
			},
			loadingSync () {
				return Object.assign({}, {
					type: 1,
					color: this.optionsSync.color,
					size:  this.optionsSync.size
				}, Util.typeof(this.optionsSync.loading) == 'Object' ? this.optionsSync.loading : (Util.typeof(this.optionsSync.loading) == 'String' || Util.typeof(this.optionsSync.loading) == 'Number') ? { type: this.optionsSync.loading } : {})
			},
			iconSync () {
				return Object.assign({}, {
					name: '',
					color: this.optionsSync.color,
					size: this.optionsSync.size,
					float: 'left'
				}, Util.typeof(this.icon) == 'Object' ? this.icon : Util.typeof(this.icon) == 'String' ? { name: this.icon } : {})
			}
		},
		methods: {
			onTap (e) {
				this.$emit('click', e);
			},
			onDoubletap (e) {
				this.$emit('doubletap', e)
			},
			onLongpress (e) {
				this.$emit('longpress', e)
			}
		}
	}
</script>

<style scoped>
	.yb-button {
		border-width: 1px;
		border-style: solid;
	}
	.yb-button .button-text {
		margin: 0 10rpx;
	}
</style>
